<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  BookOutlined,
  ClockCircleOutlined,
  CrownOutlined,
  EditOutlined,
  FileTextOutlined,
  FireOutlined,
  SafetyCertificateOutlined,
  TeamOutlined,
  TrophyOutlined,
} from '@ant-design/icons-vue';
import dayjs from 'dayjs';

import { kingdoms } from '../../../mock/zhu-dynasty/members';

const router = useRouter();

// 当前用户信息（朱瞻基）
const currentUser = ref({
  id: 'zhu-4-1',
  name: '朱瞻基',
  title: '宣宗宣德皇帝',
  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuZhanji',
  generation: 4,
  role: 'emperor',
  birthDate: '1398-03-16',
  fiefdom: '北京',
  kingdomId: 'central',
});

// 我的SBT
const mySBTs = ref([
  {
    id: 'sbt-1',
    name: '皇族身份SBT',
    description: '朱氏皇族成员身份证明',
    tokenId: 1013,
    icon: CrownOutlined,
  },
  {
    id: 'sbt-2',
    name: '学者SBT',
    description: '完成"祠堂礼仪"课程获得',
    tokenId: 3001,
    icon: BookOutlined,
  },
  {
    id: 'sbt-3',
    name: '名人SBT',
    description: '书画名家荣誉',
    tokenId: 2004,
    icon: TrophyOutlined,
  },
  {
    id: 'sbt-4',
    name: '祭礼SBT',
    description: '参与祭祖仪式获得',
    tokenId: 4001,
    icon: FireOutlined,
  },
]);

// 我的投票记录
const myVotes = ref([
  {
    id: 1,
    proposalTitle: '设立皇族教育基金',
    vote: 'for',
    voteTime: '1430-01-15T10:00:00Z',
  },
  {
    id: 2,
    proposalTitle: '增设北方边防军备',
    vote: 'for',
    voteTime: '1430-02-02T09:00:00Z',
  },
]);

// 我的故事
const myStories = ref([
  {
    id: 1,
    title: '宣德盛世回忆录',
    views: 1234,
    likes: 89,
  },
]);

// 我的学习记录
const myLearning = ref([
  {
    courseTitle: '祠堂礼仪',
    progress: 100,
    studyTime: 90,
    sbtMinted: true,
  },
  {
    courseTitle: '书法入门',
    progress: 30,
    studyTime: 36,
    sbtMinted: false,
  },
]);

// 隐私设置
const privacySettings = ref({
  genealogyVisibility: 'family',
  showContact: true,
  showActivity: true,
});

function getRoleColor(role: string) {
  const colors: Record<string, string> = {
    emperor: 'gold',
    prince: 'blue',
    royal: 'cyan',
  };
  return colors[role] || 'default';
}

function getRoleText(role: string) {
  const texts: Record<string, string> = {
    emperor: '皇帝',
    prince: '藩王',
    royal: '皇族',
  };
  return texts[role] || role;
}

function getKingdomName(kingdomId: string) {
  const kingdom = kingdoms.find((k) => k.id === kingdomId);
  return kingdom?.name || '未知';
}

function formatTime(time: string) {
  return dayjs(time).format('YYYY-MM-DD HH:mm');
}

function viewSBT(sbt: any) {
  console.log('查看SBT:', sbt);
}
</script>

<template>
  <div class="profile-page">
    <a-row :gutter="16">
      <!-- 个人信息卡片 -->
      <a-col :span="8">
        <a-card title="👤 个人信息">
          <div class="profile-header">
            <a-avatar :src="currentUser.avatar" :size="100" />
            <h2>{{ currentUser.name }}</h2>
            <p>{{ currentUser.title }}</p>
            <a-space>
              <a-tag :color="getRoleColor(currentUser.role)">
                {{ getRoleText(currentUser.role) }}
              </a-tag>
              <a-tag>第{{ currentUser.generation }}代</a-tag>
            </a-space>
          </div>

          <a-divider />

          <a-descriptions :column="1" size="small">
            <a-descriptions-item label="出生日期">
              {{ currentUser.birthDate }}
            </a-descriptions-item>
            <a-descriptions-item label="封地">
              {{ currentUser.fiefdom }}
            </a-descriptions-item>
            <a-descriptions-item label="所属藩国">
              {{ getKingdomName(currentUser.kingdomId) }}
            </a-descriptions-item>
          </a-descriptions>

          <a-button type="primary" block style="margin-top: 16px">
            <EditOutlined /> 编辑个人信息
          </a-button>
        </a-card>

        <!-- 快捷操作 -->
        <a-card title="⚡ 快捷操作" style="margin-top: 16px">
          <a-space direction="vertical" style="width: 100%">
            <a-button block @click="router.push('/zhu-family/genealogy')">
              <TeamOutlined /> 查看族谱
            </a-button>
            <a-button block @click="router.push('/zhu-family/shrine')">
              <FireOutlined /> 祭拜祖先
            </a-button>
            <a-button block @click="router.push('/zhu-family/timecapsule')">
              <ClockCircleOutlined /> 创建时间胶囊
            </a-button>
            <a-button block @click="router.push('/zhu-family/academy/stories')">
              <FileTextOutlined /> 投稿故事
            </a-button>
          </a-space>
        </a-card>
      </a-col>

      <!-- 我的SBT/NFT -->
      <a-col :span="16">
        <a-card>
          <template #title>
            <a-space>
              <SafetyCertificateOutlined />
              <span>我的SBT / NFT</span>
            </a-space>
          </template>

          <a-row :gutter="16">
            <a-col
              v-for="sbt in mySBTs"
              :key="sbt.id"
              :span="6"
              style="margin-bottom: 16px"
            >
              <a-card hoverable @click="viewSBT(sbt)">
                <div class="sbt-card">
                  <div class="sbt-icon">
                    <component :is="sbt.icon" style="font-size: 48px" />
                  </div>
                  <h4>{{ sbt.name }}</h4>
                  <p>{{ sbt.description }}</p>
                  <a-tag color="blue">SBT #{{ sbt.tokenId }}</a-tag>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>

        <!-- 活动记录 -->
        <a-card title="📊 我的活动" style="margin-top: 16px">
          <a-tabs>
            <a-tab-pane key="votes" tab="投票记录">
              <a-list :data-source="myVotes" size="small">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta :title="item.proposalTitle">
                      <template #description>
                        投票：
                        <a-tag :color="item.vote === 'for' ? 'green' : 'red'">
                          {{ item.vote === 'for' ? '赞成' : '反对' }}
                        </a-tag>
                        · {{ formatTime(item.voteTime) }}
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
            </a-tab-pane>

            <a-tab-pane key="stories" tab="我的故事">
              <a-list :data-source="myStories" size="small">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <template #actions>
                      <a>编辑</a>
                      <a>删除</a>
                    </template>
                    <a-list-item-meta :title="item.title">
                      <template #description>
                        <span>👁️ {{ item.views }} 浏览</span>
                        <span style="margin-left: 12px">👍 {{ item.likes }} 点赞</span>
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
            </a-tab-pane>

            <a-tab-pane key="learning" tab="学习记录">
              <a-list :data-source="myLearning" size="small">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta :title="item.courseTitle">
                      <template #description>
                        <a-progress :percent="item.progress" size="small" />
                        <span style="display: block; margin-top: 4px">
                          学习时长：{{ item.studyTime }}分钟
                        </span>
                      </template>
                    </a-list-item-meta>
                    <a-tag v-if="item.sbtMinted" color="gold">
                      <SafetyCertificateOutlined /> 已获得SBT
                    </a-tag>
                  </a-list-item>
                </template>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-card>

        <!-- 隐私设置 -->
        <a-card title="🔒 隐私设置" style="margin-top: 16px">
          <a-form layout="vertical">
            <a-form-item label="族谱可见性">
              <a-radio-group
                v-model:value="privacySettings.genealogyVisibility"
              >
                <a-radio value="public">公开</a-radio>
                <a-radio value="family">仅家族</a-radio>
                <a-radio value="private">仅自己</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="联系方式显示">
              <a-switch v-model:checked="privacySettings.showContact" />
              <span style="margin-left: 8px">允许家族成员查看我的联系方式</span>
            </a-form-item>
            <a-form-item label="活动动态">
              <a-switch v-model:checked="privacySettings.showActivity" />
              <span style="margin-left: 8px">在家族动态中显示我的活动</span>
            </a-form-item>
            <a-form-item>
              <a-button type="primary">保存设置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="scss">
.profile-page {
  .profile-header {
    padding: 24px 0;
    text-align: center;

    h2 {
      margin: 16px 0 8px;
    }

    p {
      margin-bottom: 12px;
      color: #666;
    }
  }

  .sbt-card {
    text-align: center;

    .sbt-icon {
      margin-bottom: 12px;
      color: #1890ff;
    }

    h4 {
      margin: 0 0 8px;
      font-size: 14px;
    }

    p {
      min-height: 36px;
      margin-bottom: 12px;
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
